<template>
    <div class="breadCrumb">
        <!-- to,通过具名路由的名字来实现跳转 -->
        <!-- 解构了props,可以直接使用data -->
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name">
            {{item.meta.name + separator}} 
        </router-link>
    </div>
</template>
<script setup>
import {watchEffect,watch,toRefs} from "vue"
// Vue3.2以后，defineEmits defineProps不再需要引入了,已经在全局了
// 父子传参，App.vue和breadCrumb传递面包屑的数据
// 声明props
let props = defineProps({
    data:{
        type:Array,
        default(){
            return []
        }
    },
    separator:{
        type:String,
        default(){
            return "/"
        }
    },

})
// console.log(props);

// 3个问题
// 1.reactive直接赋值是否解除响应式(要改为ref)
// 2.是否没有使用watch侦听props的变化
// 3.是否watchEffect不管用

watchEffect(()=>{
    // console.log('读取到的data===',props.data);
})

// watch(()=>props.data,(newVal)=>{
//     console.log('new',newVal);
// })

// 结构props
let {data,separator} = toRefs(props)
</script>
<style scoped>
.breadCrumb{
    /* border:1px solid pink; */
    margin: 10px 0;
}
.breadCrumb a {
    font-size: 16px;
    font-weight: 700;
    color:black;
    margin: 0 5px;
}
</style>